<template>
  <div class="cyclic-list-main">
    <NavigationBarBack title="管理循环任务" context="循环任务每到发送时间，将生成一条群发任务进入进行中的列表" />
    <div class="cyclic-list-wrap">
      <div class="wrap-left">
        <div class="wrap-left-head">
          <el-input class="search-input" size="small" placeholder="搜任务" suffix-icon="el-icon-search" />
          <el-select v-model="form.group" placeholder="全部分组" size="small">
            <el-option-group v-for="group in options" :key="group.label" :label="group.label">
              <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-option-group>
          </el-select>
          <el-select v-model="form.group" placeholder="全部" size="small">
            <el-option-group v-for="group in options" :key="group.label" :label="group.label">
              <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-option-group>
          </el-select>
        </div>
        <div class="el-tabs-center">
          <div :class="['tabs-item', index === activeIndex && 'active']" v-for="(tab, index) in tabs" :key="index"
            @click="onCheckTab(index)">
            <span class="title">{{ tab }}</span>
          </div>
        </div>
        <div class="list-wrap">
          <div class="task-list">
            <div class="task-item" v-for="i in 4" :key="index">
              <div class="task-bd">
                <div class="info">
                  <div class="task-icon">
                    <img class="status-img" src="@/assets/images/quxiao.png" />
                  </div>
                  <div class="info-text">
                    <div class="title">22222222</div>
                    <span>已选：1好友 1群聊</span>
                    <span>发送：1文本</span>
                  </div>
                </div>
                <div class="actions">
                  <div class="space-flex">
                    <span style="color: rgba(0, 0, 0, 0.45);">已取消</span>
                    <el-dropdown>
                      <i class="el-icon-more more-icon"></i>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>复制（全部对象）</el-dropdown-item>
                        <el-dropdown-item>复制（仅未发送对象）</el-dropdown-item>
                        <el-dropdown-item>复制（仅内容）</el-dropdown-item>
                        <el-dropdown-item>修改分组</el-dropdown-item>
                        <el-dropdown-item>删除</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                </div>
              </div>
              <div class="footer">
                <div class="account-info">ID:18691191<span style="margin-left: 4px;">主账号创建</span></div>
                <div class="time">2024-03-21 11:27</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="wrap">
          <div class="task-info">
            <div class="title">22222222222</div>
            <div class="task-info-tags">
              <div class="task-item">单次定时群发消息任务</div>
              <div class="task-item" style="background-color: rgba(0, 0, 0, 0.25);color: #fff;">已取消</div>
            </div>
          </div>
          <div class="card-info-list">
            <div class="list-item" v-for="(item, index) in infoList" :key="index">
              <div class="label">{{ item.label }}</div>
              <div :class="['value', item.onfunc && 'color-blue']" v-if="item.onfunc" @click.prevent="item.onfunc">{{ item.value }}</div>
              <div :class="['value', item.onfunc && 'color-blue']" v-else>{{ item.value }}</div>
            </div>
          </div>
          <div class="tab-bar">
            <el-tabs v-model="tabsValue" type="card" @tab-remove="removeTab">
              <el-tab-pane label="群发内容" name="0">
                <div class="tab-msg">
                  <div class="chat-list">
                    <div class="chat-item">
                      <div class="serial-number">1</div>
                      <div class="chat-text">222222</div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="下发企微号" name="1">
                <el-table :data="tableData" style="width: 100%">
                  <el-table-column prop="date" label="企微号">
                  </el-table-column>
                  <el-table-column prop="date" label="执行状态" width="300px">
                  </el-table-column>
                  <el-table-column prop="date" label="操作" width="200px">
                  </el-table-column>
                  <template slot="empty">
                    <TableEmpty />
                  </template>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </div>
    <AutoExceptionsDialog :visible="autoExceptionVisible" @handCloseDialog="onHandCloseAutoExceptionDialog" />
    <SendRequireDialog :visible="sendRequireVisible" @handCloseDialog="onHandClosesendRequireDialog" />
  </div>
</template>
<script>
import NavigationBarBack from '@/components/NavigationBarBack'
import AutoExceptionsDialog from '../components/autoExceptionsDialog'
import SendRequireDialog from '../components/SendRequireDialog'

export default {
  data() {
    return {
      activeIndex: 0,
      tabs: ['全部', '执行中', '暂停中', '已完成', '已取消'],
      form: {

      },
      options: [{
        options: [{
          value: 0,
          label: '默认分组'
        }]
      }, {
        options: [{
          value: 1,
          label: '分组管理'
        }]
      }],
      infoList: [
        { label: '创建人：', value: '主账号' },
        { label: '创建时间：', value: '2024-02-26 11:27' },
        { label: '开始时间：', value: '2024-03-21 11:27' },
        { label: '结束时间：', value: '2024-02-27 13:41' },
        { label: '群发对象条件：', value: '查看', onfunc: () => { this.sendRequireVisible = true}},
        { label: '单向好友：', value: '不发送' },
        { label: '分组：', value: '不分组' },
        { label: '异常自动处理：', value: '查看',onfunc: () => { this.autoExceptionVisible = true }}
      ],
      autoExceptionVisible: false,
      sendRequireVisible: false
    }
  },
  components: {
    NavigationBarBack,
    AutoExceptionsDialog,
    SendRequireDialog
  },
  methods: {
    onCheckTab(index) {
      this.activeIndex = index
    },
    onHandCloseAutoExceptionDialog() {
      this.autoExceptionVisible = false
    },
    onHandClosesendRequireDialog () {
      this.sendRequireVisible = false
    }
  },
}
</script>
<style lang="scss" scoped>
.cyclic-list-main {
  .cyclic-list-wrap {
    overflow: hidden;
    height: calc(100vh - 48px);
    display: flex;

    .wrap-left {
      width: 390px;
      height: 100%;
      background: #f3f3f3;
      border-right: 1px solid #e9e9e9;
      position: relative;

      &::before {
        position: absolute;
        left: 0;
        top: 0;
        content: "";
        width: 6px;
        height: 100%;
        background-color: #fff;
      }

      .wrap-left-head {
        display: grid;
        grid-template-columns: 113px 120px 113px;
        column-gap: 6px;
        justify-content: center;
        align-items: center;
        height: 50px;
        padding: 0 12px;
        border-bottom: 1px solid #e9e9e9;
        background: #fff;
      }

      .el-tabs-center {
        display: flex;
        height: 50px;
        align-items: center;
        justify-content: space-around;
        width: 100%;
        background: #FFF;
        border-bottom: 1px solid #e9e9e9;

        .tabs-item {
          position: relative;
          display: flex;
          margin: 0 18px;
          align-items: center;
          justify-content: center;
          text-align: center;
          cursor: pointer;
          height: 100%;

          &.active {
            .title {
              color: #3070ff;
              font-weight: 500;
            }

            &::after {
              content: ' ';
              position: absolute;
              bottom: 0px;
              height: 2px;
              width: 100%;
              background: #3070ff;
              transform: scaleX(1);
            }
          }

          &::after {
            content: ' ';
            position: absolute;
            bottom: 0px;
            transform: scaleX(0);
            transition: .3s;
          }

          .title {
            font-size: 14px;
            line-height: 22px;
            font-weight: 400;
            color: rgba(0, 0, 0, .85);
          }
        }
      }

      .list-wrap {
        height: 100%;
        overflow: auto;
        padding-left: 12px;
        padding-top: 12px;
        padding-bottom: 20px;

        .task-list {
          box-sizing: border-box;
          width: 364px;

          .task-item {
            width: 100%;
            padding: 12px;
            margin-bottom: 8px;
            background: #fff;
            border-radius: 4px;
            border: 1px solid #fff;
            cursor: pointer;

            .task-bd {
              width: 100%;
              overflow: hidden;
              display: flex;
              justify-content: space-between;

              .info {
                flex: 1 1;
                display: flex;
                justify-content: flex-start;
                align-items: flex-start;

                .task-icon {
                  position: relative;
                  width: 48px;
                  height: 48px;
                  margin-right: 12px;
                  border-radius: 6px;
                  display: flex;
                  align-items: center;
                  justify-content: center;

                  .status-img {
                    width: 100%;
                    height: 100%;
                  }
                }

                .info-text {
                  flex: 1 1;
                  overflow: hidden;

                  .title {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-weight: 700;
                    color: #000;
                    max-width: 180px;
                    font-size: 14px;
                  }

                  span {
                    display: block;
                    max-width: 200px;
                    font-size: 12px;
                    color: rgba(0, 0, 0, .45);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }
                }
              }

              .actions {
                .space-flex {
                  display: flex;
                  align-content: center;
                  font-size: 14px;
                  color: rgba(0, 0, 0, 0.45);
                  gap: 5px;

                  .more-icon {
                    font-size: 10px;
                  }
                }
              }
            }

            .footer {
              position: relative;
              margin-top: 12px;
              padding: 4px 0;
              font-size: 12px;
              font-weight: 400;
              color: rgba(0, 0, 0, .45);
              line-height: 20px;
              display: flex;
              align-items: center;
              justify-content: space-between;

              .account-info {
                border: 1px solid #f0f0f0;
                border-radius: 4px;
                color: rgba(0, 0, 0, .85);
                padding: 4px 10px;
                font-size: 12px;
                font-weight: 400;
                line-height: 20px;
              }

              .time {
                font-size: 12px;
                font-weight: 400;
                color: rgba(0, 0, 0, .45);
                line-height: 20px;
              }
            }
          }
        }
      }
    }

    .right {
      flex: 1 1;
      background: #fff;
      align-self: stretch;
      overflow-y: hidden;
      position: relative;
      height: 100%;
      padding: 20px 20px 50px;

      .task-info {
        height: 100%;
        overflow-y: auto;

        .title {
          margin-bottom: 10px;
          font-size: 20px;
          font-weight: 600;
          color: rgba(0, 0, 0, .85);
        }

        .task-info-tags {
          display: flex;
          align-items: center;

          .task-item {
            color: rgba(0, 0, 0, .85);
            background-color: #e0eaff;
            border: 1px solid #a2beff;
            padding: 2px 7px;
            font-size: 12px;
            line-height: 24px;
            border-radius: 4px;

            &:not(:first-child) {
              margin-left: 8px;
              border: 1px solid #e9e9e9;
            }
          }
        }
      }

      .card-info-list {
        display: grid;
        background-color: #f5f5f5;
        border-radius: 4px;
        margin: 12px 0 20px;
        column-gap: 8px;
        grid-template-columns: 150px 150px 150px 150px 150px 150px 150px;

        .list-item {
          padding: 16px;

          .label {
            color: rgba(0, 0, 0, .45);
            font-size: 12px;
            line-height: 22px;
          }

          .value {
            color: rgba(0, 0, 0, .85);
            font-size: 14px;
            line-height: 22px;

            &.color-blue {
              color: #3070ff;
              cursor: pointer;
            }
          }
        }
      }

      .tab-bar {
        position: relative;

        .tab-msg {
          background: #f3f3f3;
          border: 1px solid #e9e9e9;
          padding: 20px 0;

          .chat-list {
            .chat-item {
              display: flex;
              align-items: center;
              min-height: 60px;
              padding: 10px;

              .serial-number {
                margin-left: 20px;
                width: 20px;
                height: 20px;
                line-height: 20px;
                font-size: 12px;
                background: #ddd;
                border-radius: 50%;
                display: inline-block;
                text-align: center;
              }

              .chat-text {
                margin-left: 12px;
                padding: 6px 12px;
                font-size: 15px;
                color: #000;
                background: #fff;
                border: 1px solid #e9e9e9;
                border-radius: 5px;
              }
            }
          }
        }

      }

      .empty-content {
        margin: 150px 8px;
        font-size: 14px;
        line-height: 1.5715;
        text-align: center;

        .empty-cover {
          width: 100px;
          height: 100px;
          margin-bottom: 8px;
        }
      }
    }
  }
}
</style>